<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="cardsBalance h100p" :style="globalData.appStyle.mainStyle">
    <view :style="globalData.appStyle.navStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" backgroundColor="#FF7C00" color="#FFFFFF" title="次卡明细" left-icon="left" @clickLeft="back" />
    </view>
    <view class="contentBox" :style="globalData.appStyle.contentStyle">
      <scroll-view class="h100p main" scroll-y>
        <view v-for="(item, index) in detailList" :key="index" :class="{ mt10: index !== 0 }" class="cardItem flc" @click="cardItemClick(item)">
          <view class="top h32 flb">
            <view class="cGY3 f16 h32 l32">{{ item.type }}</view>
            <view class="cGY1 f16 h32 l32 mr16 flr" v-if="!item.demandId">
              <text :class="[item.ieType === '2' ? 'cRD1' : 'cGR']" class="f24">{{ item.ieType === '2' ? '-' : '+' }}</text>
              <text :class="[item.ieType === '2' ? 'cRD1' : 'cGR']" class="f24">{{ item.qty }}</text>
            </view>
            <view class="f16 h32 l32 flr" v-else>
              <text :class="[item.ieType === '2' ? 'cRD1' : 'cGR']" class="f24 l32">{{ item.ieType === '2' ? '-' : '+' }}</text>
              <text :class="[item.ieType === '2' ? 'cRD1' : 'cGR']" class="f24 l32 mr2">{{ item.qty }}</text>
              <uni-icons v-if="item.ieType === '2'" type="right" size="16" color="#ff5733" />
              <uni-icons v-else type="right" size="16" color="#25c465" />
            </view>
          </view>
          <view class="bottom h32 flb">
            <view class="cGY1 f14 h32 l32">{{ item.createTime }}</view>
            <view class="cGY1 f14 h32 l32">{{ item.describeContent }}</view>
          </view>
        </view>
        <view class="noData" v-if="detailList.length === 0">
          <view class="noDataImgBox flca">
            <image class="nodataImg" src="https://qzdsoft.oss-cn-shenzhen.aliyuncs.com/9b45410e958a47c68d56e64cc27fbc29e.jfif" mode="scaleToFill" />
          </view>
          <view class="noRecord">暂无记录</view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>
<script>
import commonMxins from '@/mixins/common.js';
const api = require('@/utils/request.js');
import FixedBottomBtn from '@/component/FixedBottomBtn.vue';
export default {
  mixins: [commonMxins],
  data() {
    return {
      detailList: []
    };
  },
  components: { FixedBottomBtn },
  onLoad() {
    this.queryCardsPackage(); //查询次卡套餐
  },
  methods: {
    onShareAppMessage(res) {
      return { title: 'E商机-商机触手可得', path: `/pages/procurementPage?shareId=${this.globalData.userInfo.id}` };
    },
    onShareTimeline(res) {
      return { title: 'E商机-商机触手可得', path: '/pages/procurementPage' };
    },
    async queryCardsPackage() {
      let res = await api.request({ url: '/appUser/queryMyCardsDetail', method: 'get' });
      this.detailList = res.data;
    },
    cardItemClick(item) {
      if (item.demandId) {
        this.jumpToPage(item.demandType === '1' ? `/pages/procurement/detail/index?purchaseInfoId=${item.demandId}` : `/pages/sale/detail/index?saleInfoId=${item.demandId}`);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.cardsBalance {
  .contentBox {
    position: relative;
    .main {
      padding: 12rem;
      box-sizing: border-box;
      .cardItem {
        height: 90rem;
        border: 1rem solid rgba(255, 232, 212, 1);
        box-sizing: border-box;
        border-radius: 10rem;
        width: 100%;
        padding: 13rem 20rem;
        background: #fffbf7;
        .top {
          box-sizing: border-box;
        }
        .bottom {
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>
